//
//  SwiftUIScroll.swift
//  SwiftUICode
//
//  Created by yangkl on 2024/2/19.
//

import SwiftUI

struct SwiftUIScroll: View {
    var body: some View {
        
        VStack(alignment: .leading) {
            Text("Monday, Aug 20".uppercased())
                .font(.callout)
                .foregroundColor(.secondary)
                .padding(.horizontal)
            Text("Your Reading")
                .fontWeight(.bold)
                .font(.system(.largeTitle, design: .rounded))
                .padding(.horizontal)
            ScrollView(.horizontal, showsIndicators: false){
                HStack(spacing: 16) {
                    Group{
                        CardView(image: "swiftui-button", category: "SwiftUI", heading: "Drawing a Border with Rounded Corners", author: "Simin NG")
                        
                        CardView(image: "macos-programming", category: "macOS", heading: "Building a Simple Editing \nApp", author: "Gabriel Theodoropoulos")
                        
                        CardView(image: "flutter-app", category: "Flutter", heading: "Building a Complex Layout with Flutter", author: "Lawrence Tan")
                        
                        CardView(image: "natural-language-api", category: "iOS", heading: "What's New in Natural Language API", author: "Sai Kambampati")
                    }
                    .frame(width: 300)
                    
                }
                .padding(.horizontal)
                
            }
            Spacer()
        }
    }
}


struct CardView: View {
    
    var image: String
    var category: String
    var heading: String
    var author: String
    
    var body: some View {
        
        VStack(alignment:.center){
            
            Image(image)
                .resizable()
                .aspectRatio(contentMode: .fit)
            
            
            HStack {
                VStack(alignment: .leading, content: {
                    Text(category)
                        .font(.headline)
                        .foregroundColor(.secondary)
                    Text(heading)
                        .font(.title)
                        .fontWeight(.black)
                        .foregroundColor(.primary)
                        .lineLimit(3)
                    Text("Writen by \(author)".uppercased())
                        .font(.system(.caption, design: .rounded))
                        .foregroundColor(.secondary)
                })
                .padding()
                
                Spacer()
            }
        }
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.5), lineWidth: 1)
        )
        
        
    }
}


#Preview {
    SwiftUIScroll()
}
